<template>
  <div>
    <component-head title="购物车"></component-head>
    <div class="content">
      <div class="empotcar" v-if="!items.length">
         <span class="reminder">购物车空空如也，快去<i @click="enterHome">选购商品</i>吧</span>
      </div>
      <!-- 购物车单项卡片循环 -->
      <van-swipe-cell 
        v-for="(item, index) in items"
        :key='item.id'>
        <div class="item-card">
          <!-- 复选框 -->
          <van-checkbox 
            v-model="item.isChecked"
            @click ='changecheck'></van-checkbox>
            <van-card
              :num="item.num"
              :price="item.minPrice"
              :desc="item.characteristic"
              :title="item.name"
              :thumb="item.pic"
              class="goods-card">
            </van-card>
         </div>
         <!-- 步进器 -->
         <van-stepper v-model="item.num" 
          @change ='chhangenum'/>
          <!-- 滑动删除 -->
          <template #right>
            <van-button 
              @click="delayitem(index)"
              square text="删除" type="danger" class="delete-button" />
          </template>
      </van-swipe-cell>

      <!-- 底部提交订单 -->
        <van-submit-bar :price="totals*100" button-text="提交订单" @submit="onSubmit">
          <van-checkbox 
            v-model="isAllChecked">全选</van-checkbox>
        </van-submit-bar>
    </div>
    <mybarba></mybarba>
  </div>
</template>

<script>
import mybarba from '@/components/mybarba'
import ComponentHead from '@/views/car/components/component'
import { mapState, mapMutations } from 'vuex'
import { Toast } from 'vant'
export default {
  components: {
    mybarba,
    ComponentHead
  },
  created () {
    this.PriceTotal()
  
  },
  computed: {
    ...mapState({
      items: (state) => state.cardata.items,
      totals: (state) => state.cardata.total,
    }),
      isAllChecked: {
        get () {
          return this.$store.state.cardata.isAllChecked
        },
        set (value) {
          this.setAllCheck(value)
          this.setCheck(value)
        }
      }
  },
  data () {
    return {
      value: 1

    }
  },
  methods: {
    enterHome () {
      this.$router.push('/home')
    },
    delayitem (index) {
        this.setdelay(index)
        this.PriceTotal()
    },
    changecheck () {
      
      const AllCheck = this.items.every(el=>el.isChecked)
      this.setAllCheck(AllCheck)
      this.PriceTotal()
    },
    chhangenum () {
      this.PriceTotal()
    },
    onSubmit () {
      if(this.items.length ==0){
        Toast ("请先选择商品")
        return;
      }
      console.log(!this.items.name);
      this.$router.push('/order')
    },
    ...mapMutations( 'cardata', [ 'PriceTotal', 'setAllCheck', 'setdelay', 'choseAll', 'setCheck' ])
  }
}

</script>

<style lang="scss" scoped>
  .content{
    .empotcar{
      background-image:url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3919946697,748574815&fm=26&gp=0.jpg') ;
      height: 400px;
      background-size:100% 100% ;
      background-position: center;
      background-repeat: no-repeat;
      .reminder{
        font-size: 16px;
        margin: 40px 20px;
        i{
          color: red;
          font-style: normal;
        }
      }
    }
    .van-stepper{
      display: flex;
      justify-content: flex-end;
    }

   /deep/ .van-card__bottom{
      margin-bottom: 15px;
    }
    margin-top: 46px;
    margin-bottom: 50px;
    .goods-card {
      margin: 0;
      background-color: '@white';
      width: 80%;
    }
    .delete-button {
      height: 100%;
    }
    .item-card{
      display: flex;
      justify-content: space-around;
      align-items: center;
      /deep/ .goods-card{
        flex: 1;
        margin-left: -2px;
      }
      .van-checkbox{
        margin: 0 5px;
      }
    }
    .van-submit-bar__bar{
      position: fixed;
      bottom: 50px;
      left: 0;
      width: 100%;
    }
  }
</style>
